import React, { useContext } from 'react'
import { Arrow, Plus } from '@react-vant/icons'
import DataContext from '@/Context/index'
import upmaster from '@/assets/images/upmaster.png'
import './index.less'
const Index = () => {
  const { recommend } = useContext(DataContext)
  return (
    <div className="mhy-recommend-list">
      <div className="recommend-title">
        热门话题
        <span className="show-more">
          更多
          <Arrow />
        </span>
      </div>
      <div className="recommend-container">
        <ul className="recommend-list">
          {recommend.map((item, idx) => {
            return (
              <li key={idx} className="recommend-item">
                <div className="avatar-container">
                  <img
                    className="mhy-account-avatar"
                    src={item.user.avatar_url}
                    alt=""
                  />
                  <span className="mhy-authentication-mark">
                    <img
                      className="mhy-img-icon mhy-symbol-icon"
                      src={upmaster}
                      alt=""
                    />
                  </span>
                </div>
                <p className="nickname">{item.user.nickname}</p>
                <p className="authentication-label">{item.user.certification.label}</p>
                <div className="mhy-follow-button sm-btn">
                  <i className="mhy-icon"><Plus /></i>
                  关注
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}

export default Index